import Vue from "vue";
import VueRoute from "vue-router";
// 一级路由
/* import Home from "../views/Home";
import Login from "../views/Login"; */

// 路由组件的懒加载 也是同样调用import方法
const Home = () => {
  return import("../views/Home");
};

const Login = () => import("../views/Login");
// 二级路由
// import New from "../views/Home/components/New";
// import Game from "../views/Home/components/Game";
// import Movie from "../views/Home/components/Movie";

const New = () => import("../views/Home/components/New");
const Game = () => import("../views/Home/components/Game");
const Movie = () => import("../views/Home/components/Movie");

// 三级
const GameItem = () => import("../views/Home/components/Game/Item");


Vue.use(VueRoute);



const router = new VueRoute({
  //设置路由模式为history模式!!!!
  mode: "history",
  routes: [
    {
      path: "/home",
      component: Home,
      //如果当前的路由设置有默认子路由,则不建议书写name命名路由
      // name: "Home",
      // 配置默认子路由
      redirect: "/home/new",
      // 二级路由
      children: [
        {
          path: "new",
          component: New,
          name: "news"
        },
        {
          path: "game",
          component: Game,
          name: "game",
          children: [
            {
              path: "item/:id/:title?",
              component: GameItem,
              name: "item",

              // props布尔值写法 默认会把当前路由组件接受的动态路由params参数通过props的形式传递给组件内部
              // props: true

              // 最终写法 函数
              props($router) {
                return {
                  ...$router.params,
                  ...$router.query,
                  age: 1
                };
              },

              // 路由元信息
              meta: {
                icon: "111.x",
                tit: "item"
              },

              // 路由独享守卫
              beforeEnter: (to, from, next) => {
                console.log("路由独享守卫", to, from);
                next();
              }
            }
          ]
        },
        {
          path: "movie",
          component: Movie,
          name: "movie"
        }
      ]
    },
    {
      path: "/login",
      component: Login
    },
    // 默认路由
    {
      path: "/",
      // 重定向的配置
      redirect: "/home"
    }
  ]
});


// 路由守卫
/* 
    全局前置守卫(beforeEach):只要当一个导航触发时，全局前置守卫按照创建顺序调用
    全局解析守卫(beforeReslove):在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用(并没有被渲染)
    全局后置钩子(afterEach):当整个导航全局结束的时候触发，这些钩子不会接受next函数也不会改变导航本身(只能做收尾工作)
    路由独享守卫(beforeEnter):设置给某一个固定的路由的路由表中，当当前的路由被触发的时候，路由独享守卫就会在进入路由之前触发
*/

// 一般来说路由守卫都会接收一个回调函数作为参数，回调函数接收3个参数
// 1.to:要去的路由的路由对象 2.from:来的路由的路由对象 3.next函数 是否放行的函数
// 书写全局路由守卫
router.beforeEach((to, from, next) => {
  console.log("全局前置守卫", to, from);
  next();
});

// 全局解析守卫  只解析 没有渲染
router.beforeResolve((to, from, next) => {
  console.log("全局解析守卫", to, from);
  next();
});

// 全局后置钩子
router.afterEach((to, from) => {
  console.log("全局后置钩子", to, from);
});
export default router;